<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/>
    <!--  JQUERY -->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

    <!--  BOOTSTRAP -->
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

    <title>演示bs_pagination插件的使用</title>
    <script>
        $(function () {
            $("#demo_pag1").bs_pagination({
                currentPage: 2,//当前页码，相当于pageNo
                rowsPerPage: 20,//每页显示条数,相当于pageSize
                totalPages: 100,//总的页数（必填项）
                totalRows: 0,//总条数,一般数据库查出来的多少条
                visiblePageLinks: 5,//最多可以显示的卡片
                showGoToPage: true,//是否显示"跳转到"部分，默认true---显示
                showRowsPerPage: true,//是否显示"每页显示条数"部分，默认true---显示
                showRowsInfo: true,//是否显示记录的信息，默认true--显示
                showRowsDefaultInfo: true,

                //每次返回切换页号之后的pageNo和pageSize.其中我们pageObj对象就相当于上面那个函数
                onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
                    //这个就是当用户每次切换页面的时候执行什么代码.每次切换页码，都会自动触发本函数
                    //我们可以直接通过pageObj调用里面的参数
                   /* alert(pageObj.currentPage);
                    pageObj.rowsPerPage*/
                },
            });

        });
    </script>
</head>
<body>
<!-- Just create a div and give it an ID -->

<div id="demo_pag1"></div>

</body>
</html>
